.docs-container + footer {
  display: none;
}

footer {
  padding-top: 70px;
  padding-bottom: 20px;

  .logo {
    background: url('/img/ionic-logo.png') no-repeat 0 0;
    background-size: 90px;
    height: 32px;
    width: 90px;
    display: block;
    width: 13.5%;
    margin-top: 5px;
  }

  .logo,
  ul {
    display: inline-block;
    vertical-align: top;
  }

  ul {
    width: 16.3%;
    list-style: none;

    strong {
      color: #545a64;
      font-weight: 500;
      font-size: 16px;
      padding-bottom: 5px;
    }

    a {
      color: #a1a9b6;
      font-size: 14px;
      padding: 7px 0;
      display: inline-block;

      &:hover {
        text-decoration: none;
        color: #478aff;
      }
    }
  }

  @media (max-width: $screen-sm-max) {
    nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .logo,
    ul {
      flex: 0 0 160px;
      margin-bottom: 20px;
    }

    ul {
      padding-left: 0;
      padding-right: 40px;
    }
  }

  .signup {
    margin-top: 40px;

    form {
      float: right;
      width: 40%;
      display: flex;

      @media (max-width: $screen-xs-max) {
        float: none;
        width: 100%;
        padding-bottom: 40px;
      }

      .form-control,
      .btn {
        height: 44px;
        font-size: 14px;
        display: inline-block;
        padding: 12px 20px 11px;
      }

      .form-control {
        flex: 1 0 150px;
        border: none;
        border-radius: 3px 0 0 3px;
        box-shadow: 0 1px 4px rgba(#222f45, .2);
        transition: .2s box-shadow;

        &::placeholder {
          color: rgba(#a1a9b6, .6);
          font-size: 14px;
        }

        &:focus {
          box-shadow: 0 1px 4px rgba(#222f45, .4);
        }
      }

      .btn {
        width: 110px;
        font-weight: 500;
        text-align: center;
        border-radius: 0 3px 3px 0;
      }
    }

    hgroup {
      background: url('/img/home/footer-ionitron-logo.png') no-repeat 0 0;
      background-size: 47px;
      padding-left: 65px;
      min-height: 50px;
      width: 50%;

      @media (max-width: $screen-xs-max) {
        width: 100%;
      }

      h3 {
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 15px;
      }

      p {
        font-size: 14px;
        color: #a1a9b6;
      }
    }
  }

  .copyright {
    font-size: 12px;
    color: rgba(#bac2cf, .7);
    border-top: 1px solid #eff1f5;
    margin-top: 40px;
    padding-top: 27px;

    a {
      color: rgba($blue, .7);

      &:hover {
        color: $blue;
        text-decoration: none;
      }
    }

    &::after {
      clear: both;
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }
  }
}
